<template>
  <bm-overlay
    ref="customOverlay"
    class="zone"
    pane="labelPane"
    @draw="draw"
  >
    <div>
      <p>{{ text.name }}</p>
      <p>{{ text.houseCnt }}套</p>
    </div>
  </bm-overlay>
</template>

<script>
export default {
  // props: ['text', 'position', 'active'],
  data() {
    return {

    }
  },
  watch: {
    position: {
      handler() {
        this.$refs.customOverlay.reload()
      },
      deep: true
    }
  },

  created() {

  },

  methods: {
    draw({ el, BMap, map }) {
      const { lng, lat } = this.position
      const pixel = map.pointToOverlayPixel(new BMap.Point(lng, lat))
      el.style.left = pixel.x - 42 + 'px'
      el.style.top = pixel.y - 42 + 'px'
    }
  }

}
</script>

<style scoped lang='less'>

</style>
